<template>
  <el-container>
    <el-header class='approveHeader'>
      <div class='approveHeaderBox'>
        <span class='approveHeaderBoxTitle'>标题：{{this.taskInformationData.taskTitle}}</span><span class='approveHeaderBoxWord'>
          发起人：{{this.taskInformationData.submitUserName}}</span><span class='approveHeaderBoxWord'>发起时间：{{this.taskInformationData.startDate}}</span>
        <el-button type="text" style="float: right;" @click="goBack"><i class="el-icon-close approveHeaderBoxIcon"></i></el-button>
      </div>
    </el-header>
    <el-container style="overflow: hidden;">
      <el-main class="el-box approveMainBox">
        <el-tabs v-model="activeName" @tab-click="handleClick" class="el-tabs-bg el-flex el-tabs-flex  approveTabs">
          <el-tab-pane label="业务详情" name="first">
            <el-form label-width="100px" :model='taskInformation' style="padding:0 30px;">
              <el-form-item class="approveTableTitle" label="请假单编码 :" prop="applyCode">
                <el-col :span="12">
                  <span>{{this.taskInformation.applyCode}}</span>
                </el-col>
              </el-form-item>
              <el-form-item label="部门 :" prop="applyDept">
                <el-col :span="12">
                  <span>{{this.taskInformation.applyDept}}</span>
                </el-col>
              </el-form-item>
              <el-form-item label="请假事由 :" prop="applyDesc">
                <el-col :span="12">
                  <span>{{this.taskInformation.applyDesc}}</span>
                </el-col>
              </el-form-item>
              <div style="display: flex;">
                <el-form-item label="开始日期 :" prop="startDate">
                  <el-col>
                    <span>{{this.taskInformation.startDate}}</span>
                  </el-col>
                </el-form-item>
                <el-form-item label="结束日期 :" prop="endDate">
                  <el-col>
                    <span>{{this.taskInformation.endDate}}</span>
                  </el-col>
                </el-form-item>
              </div>
              <el-form-item label="请假天数 :" prop="days">
                <el-col :span="12">
                  <span>{{this.taskInformation.days}}</span>
                </el-col>
              </el-form-item>
              <el-form-item label="申请日期 :" prop="applyDate">
                <el-col :span="12">
                  <span>{{this.taskInformation.applyDate}}</span>
                </el-col>
              </el-form-item>
              <el-form-item label="创建人 :" prop="createdBy">
                <el-col :span="12">
                  <span>{{this.taskInformation.createdBy}}</span>
                </el-col>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="流程监控" name="second" class="el-flex">
            <processMonitorChart :childInstanceId="this.taskInformationData.instanceId"></processMonitorChart>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <el-aside class="el-box-column" style='padding: 10px 0 0 0;width: 30%;min-width: 368px;'>
        <el-card class="el-flex el-card-flex" style="border-radius: 4px;">
          <div slot="header" class="clearfix">
            <span class='appoveCard' style="color: #1890FF;font-size:16px">审批记录</span>
          </div>
          <div class="block" style="overflow: auto;">
            <approvalHistory :approveListData="approveListData"></approvalHistory>
          </div>
        </el-card>
        <el-card class='approveSecondcard'>
          <div slot="header" class="clearfix">
            <span style="color: #1890FF;font-size:16px">当前节点: {{this.taskInformationData.activityName}}</span>
            <span style="font-size: 12px;float: right;color: #666666;">{{ this.taskInformationData.startDate}}</span>
          </div>
          <el-form :model="ruleForm" ref="ruleForm" class="demo-dynamic dynamic">
            <el-form-item prop="textarea">
              <el-input type="textarea" :rows="2" placeholder="请输入审批意见" v-model="ruleForm.textarea"></el-input>
            </el-form-item>
            <el-form-item style="text-align: center;">
              <el-button type="primary" @click="completeTask" plain>
                通过
                <i class="el-icon-document-checked"></i>
              </el-button>
              <!-- <el-button type="primary" @click="returnConsult">
                征询
                <i class="el-icon-edit"></i>
              </el-button> -->
              <el-button type="primary" @click="returnAppoint" plain>
                委派
                <i class="el-icon-d-arrow-right"></i>
              </el-button>
              <el-button type="warning" @click="returnBack" plain>
                回退
                <i class="el-icon-d-arrow-left"></i>
              </el-button>
              <el-button type="danger" @click="returnCompleteTask" plain>
                驳回
                <i class="el-icon-refresh-left"></i>
              </el-button>
            </el-form-item>
            <el-form-item style="text-align: center;">
              <!-- <el-button type="primary" @click="returnRetransmission">
                转发
                <i class="el-icon-message"></i>
              </el-button> -->
              <!-- <el-button type="warning" @click="returnBack">
                回退
                <i class="el-icon-d-arrow-left"></i>
              </el-button>
              <el-button type="danger" @click="returnCompleteTask">
                驳回
                <i class="el-icon-refresh-left"></i>
              </el-button> -->
            </el-form-item>
          </el-form>
        </el-card>
      </el-aside>
    </el-container>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :title="title" :visible.sync="dialogVisible"
      :before-close="handleClose">
      <div class='el-box-column'>
        <el-input style="width: 285px;" placeholder="请输入搜索内容" v-model="search"></el-input>
        <el-table ref="dormitoryTable" width="100%" style="margin-top:10px;margin-bottom:10px;" :data="tables" border
          highlight-current-row @current-change="rowData">
          <el-table-column sortable :show-overflow-tooltip="true" :prop="propOne" :label="labelOne"></el-table-column>
          <el-table-column sortable :show-overflow-tooltip="true" :prop="propTwo" :label="labelTwo"></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveActivity">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
  import {
    Tree,
    Dialog,
    MessageBox,
    Message,
    TabPane,
    Table,
    TableColumn,
    Timeline,
    TimelineItem,
    Tag,
    Tabs
  } from 'element-ui';
  import processMonitorChart from '@/views/workflow/processMonitorChart/processMonitorChart';
  import approvalHistory from '@/views/workflow/approvalHistory/approvalHistory';
  import {
    workflowdDemoSelectByInsId,
    workflowApprovalHistory
  } from '@/api/affairs/leave/leaveApprove.js'
  import {
    workflowCompleteTask,
    updateApprovalStatus
  } from '@/api/affairs/leave/leave.js'
  import {
    userList
  }from '@/api/affairs/leave/leaveApproveManage.js'
  export default {
    name: '',
    components: {
      //注册插件
      'el-tree': Tree, //树形菜单
      'el-dialog': Dialog, //弹窗
      'el-tab-pane': TabPane, //导航
      'el-table': Table, //表格
      'el-table-column': TableColumn, //表格列
      'el-timeline-item': TimelineItem, //时间轴
      'el-timeline': Timeline, //时间轴
      'el-tag': Tag,
      'el-tabs': Tabs,
      processMonitorChart, //工作流程图组件
      approvalHistory //工作流时间轴
    },
    data() {
      return {
        ruleForm: {
          textarea: ""
        },
        currentRowData: {}, //表格回退表格当前行数据
        title: "", //按钮弹框名称
        labelOne: "", //按钮弹框表格第一列表头
        labelTwo: "", //按钮弹框表格第二列表头
        propOne: "", //按钮弹框表格第1接收参数名
        propTwo: "", //按钮弹框表格第2接收参数名
        opcodeNumer: "", //节点状态码
        dialogMessage: "", //弹框提示语
        taskInformationData: {
          activityInsId: "",
          activityName: "",
          activityUser: "",
          activityUserName: "",
          approvalOpinion: "",
          endDate: "",
          instanceId: "",
          opcode: "",
          opcodeName: "",
          processId: "",
          startDate: "",
          submitUser: "",
          submitUserName: "",
          taskDesc: "",
          taskHisId: "",
          taskId: "",
          taskTitle: "",
          taskUrl: "",
          upActivityName: "",
          upActivityUser: ""
        },
        approveListData: [], //审批记录初始化数据源
        search: '',
        activeName: 'first',
        dialogVisible: false,
        taskInformation: {},
        textarea: "", //文本域初始化数据
        dormitory: []
      };
    },
    created() {
      if (this.$route.params.instanceId == null) {
        this.$router.go(-1)
      } else {
        this.taskInformationData = this.$route.params //接收动态路由参数
        this.approveData()
        this.daysInfoData()
      }
    },
    computed: {
      // 模糊搜索
      tables() {
        const search = this.search
        if (search) {
          return this.dormitory.filter(data => {
            return Object.keys(data).some(key => {
              return String(data[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }
        return this.dormitory
      }
    },
    methods: {
      handleClick(tab, event) {},
      daysInfoData() { //请假详情
        if (this.taskInformationData.instanceId == null) {
          this.taskInformation = []
        } else {
          // this.axios.get('demo/selectByInsId/' + this.taskInformationData.instanceId)
          workflowdDemoSelectByInsId(this.taskInformationData.instanceId).then(res => {
            if (res.data.code == 10000) {
              this.taskInformation = res.data.data
            }
          })
        }
      },
      approveData() { //审批记录数据
        if (this.taskInformationData.instanceId == null) {
          this.approveListData = []
        } else {
          // this.axios.get('/workFlow/getApprovalHistory?instanceId=' + this.taskInformationData.instanceId)
          let data = {
            'instanceId': this.taskInformationData.instanceId,
            'page': 0,
            'pageSize': 0
          }
          workflowApprovalHistory(data).then(res => {
            if (res.data.code == 10000) {
              this.approveListData = res.data.data.records
            }
          })
        }
      },
      handleClose(done) {
        this.dialogVisible = false
      },
      goBack() {
        this.$router.go(-1)
      },
      messageInfo() { //文本域message消息
        Message({
          type: 'warning',
          message: '请输入审批意见'
        })
      },
      completeTask(formName) { //通过
        if (this.ruleForm.textarea == "") {
          Message({
            type: 'warning',
            message: "请输入审批意见"
          });
        } else {
          // this.axios.post('workFlow/completeTask', {
          //   "approvalOpinion": this.ruleForm.textarea,
          //   "opcode": "1000",
          //   "taskId": this.taskInformationData.taskId,
          //   "instanceId": this.taskInformationData.instanceId,
          // })
          let data = {
            "approvalOpinion": this.ruleForm.textarea,
            "opcode": "1000",
            "taskId": this.taskInformationData.taskId,
            "instanceId": this.taskInformationData.instanceId,
          }
          workflowCompleteTask(data).then(res => {
            if (res.data.code == 10000) {
              Message({
                type: 'success',
                message: "审批成功"
              });
              this.$router.go(-1)
              if (res.data.data.currentState == "7") {
                var id = this.taskInformation.applyId
                var insId = this.taskInformationData.instanceId
                // this.axios.put(
                //   `/demo/updateApprovalStatus?applyId=${id}&approveStatus=E&approveStatusDesc=审批通过&instanceId=${insId}`
                // )
                let data = {
                  'applyId': id,
                  'approveStatus': 'E',
                  'approveStatusDesc': '审批通过',
                  'instanceId': insId
                }
                updateApprovalStatus().then(
                  res => {})
              }
            }
          })
        }
      },
      returnCompleteTask() { //驳回
        if (this.ruleForm.textarea == "") {
          this.messageInfo()
        } else {
          // this.axios.post('workFlow/completeTask', {
          //   "approvalOpinion": this.ruleForm.textarea,
          //   "opcode": "1001",
          //   "taskId": this.taskInformationData.taskId,
          //   "instanceId": this.taskInformationData.instanceId,
          // })
          let data = {
            "approvalOpinion": this.ruleForm.textarea,
            "opcode": "1001",
            "taskId": this.taskInformationData.taskId,
            "instanceId": this.taskInformationData.instanceId,
          }
          workflowCompleteTask(data).then(res => {
            if (res.data.code == 10000) {
              Message({
                type: 'success',
                message: '驳回成功'
              });
              this.$router.go(-1)
              var id = this.taskInformation.applyId
              var insId = this.taskInformationData.instanceId
              // this.axios.put(
              //   `/demo/updateApprovalStatus?applyId=${id}&approveStatus=D&approveStatusDesc=驳回&instanceId=${insId}`
              // )
              let data = {
                'applyId': id,
                'approveStatus': 'D',
                'approveStatusDesc': '驳回',
                'instanceId': insId
              }
              updateApprovalStatus(data).then(
                res => {})
            }
          })
        }
      },
      unReturnData() { //非驳回状态通用信息
        this.title = "请选择人员"
        this.labelOne = "人员编码"
        this.labelTwo = "人员名称"
        this.propOne = "userName"
        this.propTwo = "empName"
        this.dialogVisible = true;
        this.search = ""
        this.dialogData()
      },
      returnConsult() { //征询
        if (this.ruleForm.textarea == "") {
          this.messageInfo()
        } else {
          this.opcodeNumer = "1004"
          this.unReturnData()
          this.dialogMessage = "征询成功"
        }
      },
      returnAppoint() { //委派
        if (this.ruleForm.textarea == "") {
          this.messageInfo()
        } else {
          this.opcodeNumer = "1005"
          this.unReturnData()
          this.dialogMessage = "委派成功"
        }
      },
      returnRetransmission() { //转发
        if (this.ruleForm.textarea == "") {
          this.messageInfo()
        } else {
          this.opcodeNumer = "1006"
          this.unReturnData()
          this.dialogMessage = "转发成功"
        }
      },
      rowData(row) {
        if (this.opcodeNumer == 1003) {
          this.currentRowData = row
        } else {
          this.currentRowData = {}
          this.currentRowData.id = row.empId
          this.currentRowData.code = row.userName
          this.currentRowData.type = "emp"
          this.currentRowData.name = row.empName
        }
      },
      dialogData() { //非回退状态弹框数据
        // this.axios.get('/user/list')
        let data = {
          "page": 0,
          "size": 0,
          'type':1
        };
        userList(data).then(res => {
          if (res.data.code == 10000) {
            this.dormitory = res.data.data.records
          }
        })
      },
      saveActivity() { //弹框表格数据保存
        // this.axios.post('workFlow/completeTask', {
        //   "approvalOpinion": this.ruleForm.textarea,
        //   "opcode": this.opcodeNumer,
        //   "taskId": this.taskInformationData.taskId,
        //   "options": [this.currentRowData],
        //   "instanceId": this.taskInformationData.instanceId
        // })
        let data = {
          "approvalOpinion": this.ruleForm.textarea,
          "opcode": this.opcodeNumer,
          "taskId": this.taskInformationData.taskId,
          "options": [this.currentRowData],
          "instanceId": this.taskInformationData.instanceId
        }
        workflowCompleteTask(data).then(res => {
          if (res.data.code == 10000) {
            Message({
              type: 'success',
              message: this.dialogMessage
            });
            this.dialogVisible = false;
            this.$router.go(-1)
          }
        })
      },
      returnBack() { //回退
        if (this.ruleForm.textarea == "") {
          this.messageInfo()
        } else {
          this.title = "请选择回退节点"
          this.labelOne = "节点编码"
          this.labelTwo = "节点名称"
          this.opcodeNumer = "1003"
          this.propOne = "id"
          this.propTwo = "name"
          this.dialogVisible = true;
          this.search = ""
          this.dialogMessage = "回退成功"
          // this.axios.post('workFlow/completeTask', {
          //   "approvalOpinion": this.ruleForm.textarea,
          //   "opcode": this.opcodeNumer,
          //   "taskId": this.taskInformationData.taskId,
          //   "options": [],
          //   "instanceId": this.taskInformationData.instanceId
          // })
          let data = {
            "approvalOpinion": this.ruleForm.textarea,
            "opcode": this.opcodeNumer,
            "taskId": this.taskInformationData.taskId,
            "options": [],
            "instanceId": this.taskInformationData.instanceId
          }
          workflowCompleteTask(data).then(res => {
            if (res.data.code == 10000) {
              this.dormitory = res.data.data.resultParam
            }
          })
        }
      }
    }
  };
</script>
<style lang="scss">
  .dynamic {
    .el-textarea__inner {
      margin: 16px 0;
      padding: 16px !important;
      color: #666666;

    }
  }

  .approveHeader {
    height: 24px !important;
    margin-top: 14px;
    margin-bottom: 6px;
    padding: 0 16px;

    .approveHeaderBox {
      line-height: 24px;

      .approveHeaderBoxTitle {
        font-size: 18px;
      }

      .approveHeaderBoxWord {
        margin-left: 20px;
        font-size: 18px !important;
      }

      .approveHeaderBoxIcon {
        font-size: 18px;
        margin-top: -6px;
        color: #666666
      }
    }
  }

  .approveMainBox {
    padding: 10px 10px 0 0 !important;

    .approveTabs {
      border-radius: 4px;
    }
  }

  .approveSecondcard {
    margin-top: 10px;
    border-radius: 4px;
    padding: 0;

  }
</style>
